<template>
  <div>
    <a-config-provider :locale="locale">
        <div style="font-size: 14pt;margin-bottom: 10px"><span style="font-weight: bold; ">编号：</span>{{ formData.applyCode.componentProp.defaultValue }}</div>
        <div style="font-size: 18pt; text-align: center; margin-bottom: 50px; font-weight: bolder">
          中电信翼康科技有限公司员工请假单
        </div>
        <a-form ref="vForm" :model="formData" hideRequiredMark>
          <table border="1" cellspacing="0" cellpadding="0" style="width: 100%" class="yk_table">
            <tr>
              <td><span style="font-weight: bold; ">申请人姓名</span></td>
              <td>
                <a-form-item :label="formData.applyUserName.label" class="hideLabel" :name="[
                  formData.applyUserName.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.applyUserName.componentProp.hidden" :rules="formData.applyUserName.rules">
                  <a-input v-model:value="formData.applyUserName.componentProp.defaultValue
                    " :disabled="formData.applyUserName.componentProp.disabled" :placeholder="formData.applyUserName.componentProp.placeholder
    " />
                </a-form-item>
              </td>
              <td colspan="1" style="width: 60px;"><span style="font-weight: bold; ">部门</span></td>
              <td>
                <a-form-item :label="formData.applyUserDeptName.label" class="hideLabel" :name="[
                  formData.applyUserDeptName.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.applyUserDeptName.componentProp.hidden" :rules="formData.applyUserDeptName.rules">
                  <a-textarea auto-size v-model:value="formData.applyUserDeptName.componentProp.defaultValue
                    " :disabled="formData.applyUserDeptName.componentProp.disabled" :placeholder="formData.applyUserDeptName.componentProp.placeholder
    " />
                </a-form-item>
              </td>
              <td><span style="font-weight: bold; ">申请日期</span></td>
              <td>
                <a-form-item :label="formData.applyTime.label" class="hideLabel formTimedisplay" :name="[
                  formData.applyTime.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.applyTime.componentProp.hidden" :rules="formData.applyTime.rules">
                  <a-date-picker style="width: 100%;" v-model:value="formData.applyTime.componentProp.defaultValue"
                    :disabled="formData.applyTime.componentProp.disabled"
                    :placeholder="formData.applyTime.componentProp.placeholder" type="date" show-time
                    value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm" />
                </a-form-item>
              </td>
            </tr>
            <tr>
              <td><span style="font-weight: bold; ">请假类型</span></td>
              <td colspan="5">
                <a-form-item :label="formData.infoType.label" class="hideLabel radiogroup" :name="[
                  formData.infoType.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.infoType.componentProp.hidden" :rules="formData.infoType.rules">
                  <a-radio-group  v-model:value="formData.infoType.componentProp.defaultValue"
                    :disabled="formData.infoType.componentProp.disabled"
                    :placeholder="formData.infoType.componentProp.placeholder"
                    :options="formData.infoType.componentProp.option">
                  </a-radio-group>
                </a-form-item>
              </td>

            </tr>
            <tr>
              <td><span style="font-weight: bold; ">请假时间</span></td>
              <td colspan="4" >
                <div style="display: flex; align-items: center; border: none;">
                <div style="display: flex; align-items: center;">
                  <a-form-item :label="formData.startTime.label" class="hideLabel " :name="[
                    formData.startTime.field,
                    'componentProp',
                    'defaultValue',
                  ]" v-if="!formData.startTime.componentProp.hidden" :rules="formData.startTime.rules">
                    <a-date-picker v-model:value="formData.startTime.componentProp.defaultValue"
                      :disabled="formData.startTime.componentProp.disabled"
                      :placeholder="formData.startTime.componentProp.placeholder" type="date"
                      :disabledDate="disabledStartDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />

                  </a-form-item>
                  <a-form-item :label="formData.startHalfDay.label" class="hideLabel " :name="[
                    formData.startHalfDay.field,
                    'componentProp',
                    'defaultValue',
                  ]" v-if="!formData.startHalfDay.componentProp.hidden" :rules="formData.startHalfDay.rules">
                    <a-select ref="select" v-model:value="formData.startHalfDay.componentProp.defaultValue"
                      :disabled="formData.startHalfDay.componentProp.disabled"
                      :placeholder="formData.startHalfDay.componentProp.placeholder"
                      :options="formData.startHalfDay.componentProp.option">
                    </a-select>
                  </a-form-item>
                </div>
                  -
                <div style="display: flex; align-items: center;">
                  <a-form-item :label="formData.endTime.label" class="hideLabel" :name="[
                    formData.endTime.field,
                    'componentProp',
                    'defaultValue',
                  ]" v-if="!formData.endTime.componentProp.hidden" :rules="formData.endTime.rules">
                    <a-date-picker :disabledDate="disabledEndDate"
                      v-model:value="formData.endTime.componentProp.defaultValue"
                      :disabled="formData.endTime.componentProp.disabled"
                      :placeholder="formData.endTime.componentProp.placeholder" type="date" value-format="YYYY-MM-DD"
                      format="YYYY-MM-DD" />
                  </a-form-item>
                  <a-form-item :label="formData.endHalfDay.label" class="hideLabel" :name="[
                    formData.endHalfDay.field,
                    'componentProp',
                    'defaultValue',
                  ]" v-if="!formData.endHalfDay.componentProp.hidden" :rules="formData.endHalfDay.rules">
                    <a-select ref="select" v-model:value="formData.endHalfDay.componentProp.defaultValue"
                      :disabled="formData.endHalfDay.componentProp.disabled"
                      :placeholder="formData.endHalfDay.componentProp.placeholder"
                      :options="formData.endHalfDay.componentProp.option">
                    </a-select>
                  </a-form-item>
                </div>
              </div>
              </td>
              <td colspan="1">
                <a-form-item label="共计：" :name="[
                  formData.days.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.days.componentProp.hidden" :rules="formData.days.rules">
                  <a-input v-model:value="formData.days.componentProp.defaultValue
                    " :disabled="formData.days.componentProp.disabled" :placeholder="formData.days.componentProp.placeholder
    " suffix="天" />
                </a-form-item>
              </td>
            </tr>
            <tr>
              <td><span style="font-weight: bold; ">事由说明</span></td>
              <td colspan="5">
                <a-form-item :label="formData.reason.label" class="hideLabel" :name="[
                  formData.reason.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.reason.componentProp.hidden" :rules="formData.reason.rules">
                  <a-textarea v-model:value="formData.reason.componentProp.defaultValue"
                    :disabled="formData.reason.componentProp.disabled"
                    :placeholder="formData.reason.componentProp.placeholder" />
                </a-form-item>
              </td>
            </tr>
            <tr>
              <td rowspan="1"><span style="font-weight: bold; ">人力资源部<br>BASE地人事意见</span></td>
              <td colspan="5">
                <a-form-item :label="formData.manpowerManagerContent.label" class="hideLabel" :name="[
                  formData.manpowerManagerContent.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.manpowerManagerContent.componentProp.hidden"
                  :rules="formData.manpowerManagerContent.rules">
                  <a-textarea v-model:value="formData.manpowerManagerContent.componentProp.defaultValue"
                    :disabled="formData.manpowerManagerContent.componentProp.disabled"
                    :placeholder="formData.manpowerManagerContent.componentProp.placeholder" />
                </a-form-item>
                <div style="float: right; margin-top: 10px;">
                  <a-row :gutter="16">
                    <a-col :span="12">
                      <a-form-item label="签字：" :name="[
                        formData.manpowerManagerSign.field,
                        'componentProp',
                        'defaultValue',
                      ]" v-if="!formData.manpowerManagerSign.componentProp.hidden"
                        :rules="formData.manpowerManagerSign.rules">
                        <a-input v-model:value="formData.manpowerManagerSign.componentProp.defaultValue
                          " :disabled="formData.manpowerManagerSign.componentProp.disabled
    " :placeholder="formData.manpowerManagerSign.componentProp.placeholder
    " />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item :label="formData.manpowerManagerDate.label" class="hideLabel formTimedisplay" :name="[
                        formData.manpowerManagerDate.field,
                        'componentProp',
                        'defaultValue',
                      ]" v-if="!formData.manpowerManagerDate.componentProp.hidden"
                        :rules="formData.manpowerManagerDate.rules">
                        <a-date-picker v-model:value="formData.manpowerManagerDate.componentProp.defaultValue
                          " :disabled="formData.manpowerManagerDate.componentProp.disabled" :placeholder="formData.manpowerManagerDate.componentProp.placeholder
    " show-time type="date" value-format="YYYY-MM-DD HH:mm" format="YYYY年MM月DD日 HH:mm"  style="width: 100%;" />
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </td>
            </tr>
            <tr>
              <td rowspan="1"><span style="font-weight: bold; ">部门意见</span></td>
              <td colspan="5">
                <a-form-item :label="formData.deptManagerContent.label" class="hideLabel" :name="[
                  formData.deptManagerContent.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.deptManagerContent.componentProp.hidden" :rules="formData.deptManagerContent.rules">
                  <a-textarea v-model:value="formData.deptManagerContent.componentProp.defaultValue"
                    :disabled="formData.deptManagerContent.componentProp.disabled"
                    :placeholder="formData.deptManagerContent.componentProp.placeholder" />
                </a-form-item>
                <div style="float: right; margin-top: 10px;">
                  <a-row :gutter="16">
                    <a-col :span="12">
                      <a-form-item label="签字：" :name="[
                        formData.deptManagerSign.field,
                        'componentProp',
                        'defaultValue',
                      ]" v-if="!formData.deptManagerSign.componentProp.hidden" :rules="formData.deptManagerSign.rules">
                        <a-input v-model:value="formData.deptManagerSign.componentProp.defaultValue
                          " :disabled="formData.deptManagerSign.componentProp.disabled
    " :placeholder="formData.deptManagerSign.componentProp.placeholder
    " />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item style="width: 100%;" :label="formData.deptManagerDate.label" class="hideLabel formTimedisplay" :name="[
                        formData.deptManagerDate.field,
                        'componentProp',
                        'defaultValue',
                      ]" v-if="!formData.deptManagerDate.componentProp.hidden" :rules="formData.deptManagerDate.rules">
                        <a-date-picker v-model:value="formData.deptManagerDate.componentProp.defaultValue
                          " :disabled="formData.deptManagerDate.componentProp.disabled" :placeholder="formData.deptManagerDate.componentProp.placeholder
    " type="date" show-time value-format="YYYY-MM-DD HH:mm" format="YYYY年MM月DD日 HH:mm"  style="width: 100%;"/>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </td>
            </tr>
            <tr>
              <td rowspan="1"><span style="font-weight: bold; ">分管副总意见</span></td>
              <td colspan="5">
                <a-form-item :label="formData.deputyGeneralManagerContent.label" class="hideLabel" :name="[
                  formData.deputyGeneralManagerContent.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.deputyGeneralManagerContent.componentProp.hidden"
                  :rules="formData.deputyGeneralManagerContent.rules">
                  <a-textarea v-model:value="formData.deputyGeneralManagerContent.componentProp.defaultValue"
                    :disabled="formData.deputyGeneralManagerContent.componentProp.disabled"
                    :placeholder="formData.deputyGeneralManagerContent.componentProp.placeholder" />
                </a-form-item>
                <div style="float: right; margin-top: 10px;">
                  <a-row :gutter="16">
                    <a-col :span="12">
                      <a-form-item label="签字：" :name="[
                        formData.deputyGeneralManagerSign.field,
                        'componentProp',
                        'defaultValue',
                      ]" v-if="!formData.deputyGeneralManagerSign.componentProp.hidden"
                        :rules="formData.deputyGeneralManagerSign.rules">
                        <a-input v-model:value="formData.deputyGeneralManagerSign.componentProp.defaultValue
                          " :disabled="formData.deputyGeneralManagerSign.componentProp.disabled
    " :placeholder="formData.deputyGeneralManagerSign.componentProp.placeholder
    " />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item style="width: 100%;" :label="formData.deputyGeneralManagerDate.label" class="hideLabel formTimedisplay"
                        :name="[
                          formData.deputyGeneralManagerDate.field,
                          'componentProp',
                          'defaultValue',
                        ]" v-if="!formData.deputyGeneralManagerDate.componentProp.hidden"
                        :rules="formData.deputyGeneralManagerDate.rules">
                        <a-date-picker v-model:value="formData.deputyGeneralManagerDate.componentProp.defaultValue
                          " :disabled="formData.deputyGeneralManagerDate.componentProp.disabled" :placeholder="formData.deputyGeneralManagerDate.componentProp.placeholder
    " type="date" show-time value-format="YYYY-MM-DD HH:mm" format="YYYY年MM月DD日 HH:mm"  style="width: 100%;"/>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </td>
            </tr>
            <tr>
              <td rowspan="1"><span style="font-weight: bold; ">总经理意见</span></td>
              <td colspan="5">
                <a-form-item :label="formData.generalManagerContent.label" class="hideLabel" :name="[
                  formData.generalManagerContent.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.generalManagerContent.componentProp.hidden"
                  :rules="formData.generalManagerContent.rules">
                  <a-textarea v-model:value="formData.generalManagerContent.componentProp.defaultValue"
                    :disabled="formData.generalManagerContent.componentProp.disabled"
                    :placeholder="formData.generalManagerContent.componentProp.placeholder" />
                </a-form-item>
                <div style="float: right; margin-top: 10px;">
                  <a-row :gutter="16">
                    <a-col :span="12">
                      <a-form-item label="签字：" :name="[
                        formData.generalManagerSign.field,
                        'componentProp',
                        'defaultValue',
                      ]" v-if="!formData.generalManagerSign.componentProp.hidden"
                        :rules="formData.generalManagerSign.rules">
                        <a-input v-model:value="formData.generalManagerSign.componentProp.defaultValue
                          " :disabled="formData.generalManagerSign.componentProp.disabled
    " :placeholder="formData.generalManagerSign.componentProp.placeholder
    " />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item style="width: 100%;" :label="formData.generalManagerDate.label" class="hideLabel formTimedisplay" :name="[
                        formData.generalManagerDate.field,
                        'componentProp',
                        'defaultValue',
                      ]" v-if="!formData.generalManagerDate.componentProp.hidden"
                        :rules="formData.generalManagerDate.rules">
                        <a-date-picker v-model:value="formData.generalManagerDate.componentProp.defaultValue
                          " :disabled="formData.generalManagerDate.componentProp.disabled" :placeholder="formData.generalManagerDate.componentProp.placeholder
    " type="date" show-time value-format="YYYY-MM-DD HH:mm" format="YYYY年MM月DD日 HH:mm"  style="width: 100%;"/>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </td>
            </tr>
            <tr>
              <td rowspan="2"><span style="font-weight: bold; ">销假</span></td>
              <td><span style="font-weight: bold; ">销假时间</span></td>
              <td colspan="2">
                <a-form-item :label="formData.terminateTime.label" class="hideLabel formTimedisplay" :name="[
                  formData.terminateTime.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.terminateTime.componentProp.hidden" :rules="formData.terminateTime.rules">
                  <a-date-picker v-model:value="formData.terminateTime.componentProp.defaultValue"
                    :disabled="formData.terminateTime.componentProp.disabled"
                    :disabledDate="disabledTerminateDate"
                    :disabledTime="disabledTerminateDateTime"
                    :placeholder="formData.terminateTime.componentProp.placeholder" type="date" show-time
                    value-format="YYYY-MM-DD HH:mm" format="YYYY年MM月DD日 HH:mm" style="width: 100%;"/>
                </a-form-item>
              </td>
              <td><span style="font-weight: bold; ">签名</span></td>
              <td colspan="2">
                <a-form-item :label="formData.applyUserSign.label" class="hideLabel" :name="[
                  formData.applyUserSign.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.applyUserSign.componentProp.hidden" :rules="formData.applyUserSign.rules">
                  <a-input v-model:value="formData.applyUserSign.componentProp.defaultValue
                    " :disabled="formData.applyUserSign.componentProp.disabled" :placeholder="formData.applyUserSign.componentProp.placeholder
    " />
                </a-form-item>
              </td>
            </tr>
            <tr>
              <td style="width: 120px"><span style="font-weight: bold; ">部门负责人复核</span></td>
              <td colspan="4">
                <a-form-item style="margin-bottom: 10px" :label="formData.terminateDeptContent.label" class="hideLabel"
                  :name="[
                    formData.terminateDeptContent.field,
                    'componentProp',
                    'defaultValue',
                  ]" v-if="!formData.terminateDeptContent.componentProp.hidden"
                  :rules="formData.terminateDeptContent.rules">
                  <a-textarea v-model:value="formData.terminateDeptContent.componentProp.defaultValue"
                    :disabled="formData.terminateDeptContent.componentProp.disabled"
                    :placeholder="formData.terminateDeptContent.componentProp.placeholder" />
                </a-form-item>
                <div style="float: right; display: flex">
                  <a-row :gutter="16">
                    <a-col :span="12">
                  <a-form-item label="签字" :name="[
                    formData.terminateDeptSign.field,
                    'componentProp',
                    'defaultValue',
                  ]" v-if="!formData.terminateDeptSign.componentProp.hidden" :rules="formData.terminateDeptSign.rules">
                    <a-input v-model:value="formData.terminateDeptSign.componentProp.defaultValue"
                      :disabled="formData.terminateDeptSign.componentProp.disabled"
                      :placeholder="formData.terminateDeptSign.componentProp.placeholder" />
                  </a-form-item>
                  </a-col>
                  <a-col :span="12">
                  <a-form-item style="width: 100%; margin-bottom: 10px"  label="" :name="[
                    formData.terminateDeptDate.field,
                    'componentProp',
                    'defaultValue',
                  ]" v-if="!formData.terminateDeptDate.componentProp.hidden" :rules="formData.terminateDeptDate.rules">
                    <a-date-picker style="width: 100%" v-model:value="formData.terminateDeptDate.componentProp.defaultValue
                      " :disabled="formData.terminateDeptDate.componentProp.disabled"
                      :placeholder="formData.terminateDeptDate.componentProp.placeholder" type="date" show-time
                      value-format="YYYY-MM-DD HH:mm" format="YYYY年MM月DD日 HH:mm" />
                  </a-form-item>
                  </a-col>
                  </a-row>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="6" style="text-align: left;color:#ff0000">
                <p>注意：1.请在“事由说明”中填写请假详情；</p>           
                <p>2.病假及非因公负伤须上传正规医院的诊断证明（急诊可持急诊证明）；</p>
                <p>3.生育假须上传医院相关证明作为附件。</p>
                <p>4.婚假须上传结婚证明作为附件。</p>
              </td>
            </tr>
          </table>
        </a-form>
    </a-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import dayjs, { Dayjs } from "dayjs";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
const vForm = ref();
const locale = ref(zhCN);
const formData = reactive({
  applyCode: {
    type: "input",
    field: "applyCode",
    label: "编号",
    rules: [{ required: false }],
    componentProp: {
      defaultValue: '${applyCode}',
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  role: {
    type: 'input',
    field: 'role',
    label: '申请人角色（隐藏）',
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserRole}",
      disabled: false,
      hidden: false,
      placeholder: ""
    }
  },
  applyUserSign: {
    type: "input",
    field: "applyUserSign",
    label: "申请人签名",
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  applyUserName: {
    type: "input",
    field: "applyUserName",
    label: "申请人",
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserName}",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  applyUserId: {
    type: "input",
    field: "applyUserId",
    label: "申请人Id",
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserId}",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  applyUserDeptName: {
    type: "input",
    field: "applyUserDeptName",
    label: "部门",
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserDeptName}",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  applyUserDeptId: {
    type: "input",
    field: "applyUserDeptId",
    label: "部门Id",
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserDeptId}",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  applyTime: {
    type: "datepicker",
    field: "applyTime",
    label: "申请日期",
    rules: [{ required: true }],
    componentProp: {
      placeholder: '请选择',
      defaultValue: '',
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  terminateTime: {
    type: "datepicker",
    field: "terminateTime",
    label: "销假时间",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "销假时间",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  days: {
    type: "input",
    field: "days",
    label: "天数",
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "",
      disabled: true,
      hidden: false,
      placeholder: "",
    },
  },
  reason: {
    type: "textarea",
    field: "reason",
    label: "事由",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  startTime: {
    type: "datepicker",
    field: "startTime",
    label: "开始时间",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "开始时间",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  startHalfDay: {
    type: "select",
    field: "startHalfDay",
    label: "开始时间段（上午/下午）",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "开始时间段（上午/下午）",
      defaultValue: "08:30",
      disabled: false,
      hidden: false,
      option: [
        { label: '上午', value: '08:30' },
        { label: '下午', value: '13:30' }
      ],
    },
  },
  endTime: {
    type: "datepicker",
    field: "endTime",
    label: "结束时间",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "结束时间",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  endHalfDay: {
    type: "select",
    field: "endHalfDay",
    label: "结束时间段（上午/下午）",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "结束时间段（上午/下午）",
      defaultValue: "15:30",
      disabled: false,
      hidden: false,
      option: [
        { label: '上午', value: '11:30' },
        { label: '下午', value: '15:30' }
      ],
    },
  },
  infoType: {
    type: "checkbox",
    field: "infoType",
    label: "请假类型",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: [],
      disabled: false,
      hidden: false,
      option: [
        { label: "年休假", value: "0" },
        { label: "事假", value: "1" },
        { label: "病假", value: "2" },
        { label: "婚假", value: "3" },
        { label: "生育假", value: "4" },
        { label: "丧假", value: "5" },
        { label: "工伤假", value: "6" },
      ],
    },
  },
  deptManagerSign: {
    type: "input",
    field: "deptManagerSign",
    label: "部门（分公司）经理签字",
    rules: [
      {
        required: true,
      },
    ],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  deptManagerContent: {
    type: "input",
    field: "deptManagerContent",
    label: "部门（分公司）经理意见",
    rules: [
      {
        required: true,
      },
    ],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  deptManagerDate: {
    type: "datepicker",
    field: "deptManagerDate",
    label: "部门（分公司）经理签字日期",
    rules: [{ required: true, }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  manpowerManagerSign: {
    type: "input",
    field: "manpowerManagerSign",
    label: "人力资源签字",
    rules: [
      {
        required: true,
      },
    ],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  manpowerManagerContent: {
    type: "input",
    field: "manpowerManagerContent",
    label: "人力资源意见",
    rules: [
      {
        required: true,
      },
    ],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  manpowerManagerDate: {
    type: "datepicker",
    field: "manpowerManagerDate",
    label: "人力资源签字日期",
    rules: [{ required: true, }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  deputyGeneralManagerContent: {
    type: "input",
    field: "deputyGeneralManagerContent",
    label: "分管副总意见",
    rules: [
      {
        required: true,
      },
    ],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  deputyGeneralManagerSign: {
    type: "input",
    field: "deputyGeneralManagerSign",
    label: "分管副总签字",
    rules: [
      {
        required: true,
      },
    ],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  deputyGeneralManagerDate: {
    type: "datepicker",
    field: "deputyGeneralManagerDate",
    label: "分管副总签字日期",
    rules: [{ required: true, }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  generalManagerContent: {
    type: "input",
    field: "generalManagerContent",
    label: "总经理意见",
    rules: [
      {
        required: true,
      },
    ],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  generalManagerSign: {
    type: "input",
    field: "generalManagerSign",
    label: "总经理签字",
    rules: [
      {
        required: true,
      },
    ],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  generalManagerDate: {
    type: "datepicker",
    field: "generalManagerDate",
    label: "总经理签字日期",
    rules: [{ required: true, }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  terminateDeptContent: {
    type: "textarea",
    field: "terminateDeptContent",
    label: "销假部门负责人复核意见",
    rules: [
      {
        required: true,
      },
    ],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  terminateDeptSign: {
    type: "input",
    field: "terminateDeptSign",
    label: "销假部门负责人复核签字",
    rules: [
      {
        required: true,
      },
    ],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  terminateDeptDate: {
    type: "datepicker",
    field: "terminateDeptDate",
    label: "销假部门负责人复核签字日期",
    rules: [{ required: true, }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  }
});
const submitForm = () => {
  return vForm.value.validate();
};
const disabledStartDate = (current: Dayjs) => {
  return current > dayjs(formData.endTime.componentProp.defaultValue).endOf('day');
}
const disabledEndDate = (current: Dayjs) => {
  return current < dayjs(formData.startTime.componentProp.defaultValue).subtract(1, 'day');
}
// 销假日期
const disabledTerminateDate = (current: Dayjs) => {
  return current < dayjs().startOf('day');
}
// 销假日期
const disabledTerminateDateTime = (now: Dayjs) => {
  const range = (start:any) => {
    const result = []
    for (let i = 0; i < start; i++) {
      result.push(i)
    }
    return result
  }
  return {
    disabledHours: () => range(dayjs().hour()),
    disabledMinutes: () => range(dayjs().minute()),
    disabledSeconds: () => range(dayjs().second()),
  };
}
// 监听请假时间
watch(() => formData.endHalfDay.componentProp.defaultValue, (val) => {
  if (formData.endTime.componentProp.defaultValue && formData.startTime.componentProp.defaultValue) {
    const days = calculateDaysWithTime(formData.startTime.componentProp.defaultValue, formData.endTime.componentProp.defaultValue, formData.startHalfDay.componentProp.defaultValue, formData.endHalfDay.componentProp.defaultValue)
    formData.days.componentProp.defaultValue = days + '';
  }
})
watch(() => formData.startHalfDay.componentProp.defaultValue, (val) => {
  if (formData.endTime.componentProp.defaultValue && formData.startTime.componentProp.defaultValue) {
    const days = calculateDaysWithTime(formData.startTime.componentProp.defaultValue, formData.endTime.componentProp.defaultValue, formData.startHalfDay.componentProp.defaultValue, formData.endHalfDay.componentProp.defaultValue)
    formData.days.componentProp.defaultValue = days + '';
  }
})
watch(() => formData.endTime.componentProp.defaultValue, (val) => {
  if (formData.startTime.componentProp.defaultValue) {
    const days = calculateDaysWithTime(formData.startTime.componentProp.defaultValue, formData.endTime.componentProp.defaultValue, formData.startHalfDay.componentProp.defaultValue, formData.endHalfDay.componentProp.defaultValue)
    formData.days.componentProp.defaultValue = days + '';
  }
})
watch(() => formData.startTime.componentProp.defaultValue, (val) => {
  if (formData.endTime.componentProp.defaultValue) {
    const days = calculateDaysWithTime(formData.startTime.componentProp.defaultValue, formData.endTime.componentProp.defaultValue, formData.startHalfDay.componentProp.defaultValue, formData.endHalfDay.componentProp.defaultValue)
    formData.days.componentProp.defaultValue = days + '';
  }
})
// 根据开始结束时间计算天数
const calculateDaysWithTime = (startDate: string, endDate: string, startHalf: string, endHalf: string): number => {
  let days = 0
  let computerDay = (new Date(endDate) - new Date(startDate)) / 1000 / 60 / 60 / 24
  days = computerDay + 1
  if (startHalf == '13:30') {
    days -= 0.5
  }
  if (endHalf == '11:30') {
    days -= 0.5
  }
  return days
}

defineExpose({
  formData,
  submitForm,
});
</script>

<style scoped>
.yk_table .ant-form-item {
  margin-bottom: 0;
}

.yk_table .ant-input-number {
  width: 100%;
}

.yk_table td {
  padding: 10px;
}

::v-deep .hideLabel .ant-form-item-label {
  display: none !important;
}

::v-deep .formTimedisplay {
  display: inline-block !important;
  width: 100%;
}

::v-deep .formTimeSpan {
  vertical-align: text-top;
  display: inline-block;
  margin: 0 10px;
}

::v-deep .ant-input-affix-wrapper-disabled,
.ant-input-affix-wrapper[disabled],
.ant-input-disabled,
.ant-input[disabled],
.ant-picker.ant-picker-disabled,
.ant-select-disabled .ant-select:not(.ant-select-customize-input) .ant-select-selector {
  background: #fff !important;
  color: #666 !important;
}

::v-deep input[disabled],
.ant-input-number-disabled {
  color: #666 !important;
  background-color: #fff !important;
}
::v-deep label {
  font-weight: bolder;
}
::v-deep [data-v-7d04de55cd5c187cd1a36f9b711ea713] [class^="ant-radio"] [class^="ant-radio"], [class*=" ant-radio"] [class^="ant-radio"][data-v-7d04de55cd5c187cd1a36f9b711ea713], :where(.css-dev-only-do-not-override-1yss7cb)[class^="ant-radio"] [class*=" ant-radio"][data-v-7d04de55cd5c187cd1a36f9b711ea713], :where(.css-dev-only-do-not-override-1yss7cb)[class*=" ant-radio"] [class*=" ant-radio"][data-v-7d04de55cd5c187cd1a36f9b711ea713]{
  font-weight: normal !important;
}
</style>
